<template>
  <!--分配角色-->
  <div class="search">
    <Form ref="form" :model="formItem" :label-width="100">
      <FormItem label="拥有角色" prop="grantRoles">
        <CheckboxGroup v-model="formItem.grantRoles">
          <Checkbox v-for="(item,index) in selectRoles" :key="index" :label="item.roleId">
            <span>{{ item.roleName }}</span>
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
    </Form>
  </div>
</template>

<script>

export default {
  name: 'UserRole',
  props: {},
  data () {
    return {
      selectRoles: [],
      formItem: this.getFormItem()
    }
  },
  methods: {
    getFormItem () {
      return {
        userId: '',
        grantRoles: []
      }
    },
    setData (data) {
      if (data && data.userId) {
        Object.assign(this.formItem, {
          userId: data.userId
        })
        this.handleLoadRoles(data.userId)
      }
    },
    handleReset () {
      this.$refs['form'].resetFields()
      this.formItem = this.getFormItem()
    },
    handleSubmit () {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http.post(this.$apis.user.saveUserRoles, {
              userId: this.formItem.userId,
              roleIds: this.formItem.grantRoles.join(',')
            }, this).then(res => {
              resolve(res)
            }).catch(function (err) {
              reject(err)
            })
          } else {
            resolve(false)
          }
        })
      })
    },
    handleLoadRoles (userId) {
      if (!userId) {
        return
      }
      const that = this
      const p1 = this.$http.get(this.$apis.role.list, {}, this)

      const p2 = this.$http.get(this.$apis.user.getUserRoles, { userId: userId }, this)

      Promise.all([p1, p2]).then(function (values) {
        const res1 = values[0]
        const res2 = values[1]
        if (res1.code === 0) {
          that.selectRoles = res1.data
        }
        if (res2.code === 0) {
          const result = []
          res2.data.map(item => {
            result.push(item.roleId)
          })
          that.formItem.grantRoles = result
        }
      })
    }
  },
  created () {

  },
  components: {}
}
</script>

<style scoped lang="less" rel="stylesheet/less">

</style>
